{% extends "base.html" %}

{% block title %}Services{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- bootstrap-select -->
<link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    Services
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/blues/blues/clusterler/cluster">集群管理</a></li>
    <li class="active"><a href="/blues/cluster/services/">Services</a></li>
  </ol>
</section>


<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">

      <form class="form-inline" style="margin-bottom: 10px">
        <div class="form-group">
          <label for="selectCluster"> <span style="color: red">*</span> 集群</label>
          <select class="form-control need-refresh-table" id="selectCluster" name="cluster_id" required>
            <option value="" selected>--请选择--</option>
          </select>
        </div>
        &nbsp;
        <div class="form-group">
          <label for="selectNamespace"> <span style="color: red">*</span> 命名空间</label>
          <select class="form-control need-refresh-table" id="selectNamespace" name="namespace" required>
          </select>
        </div>
        &nbsp;

      </form>


      <!--表格1-->
      <div class="box">
        <!--        <div class="box-header">-->
        <!--          <h3 class="box-title">节点概览</h3>-->
        <!--        </div>-->
        <div class="box-body">
          <table id="example1" class="table-hover table-bordered table-condensed table-striped" style="width:100%;font-size: 90%">
            <thead>
            <tr>
              <th>名称</th>
              <th>命名空间</th>
              <th>类型</th>
              <th>Cluster-IP</th>
              <th>端口</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div id="loading" class="overlay" style="display: block">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<script src="/static/js/bootstrap-select.min.js"></script>
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Page specific script -->
<script type="text/javascript">
    // 解析URL, 定义全局变量
    var type = 'services'
    var cluster_id = getQueryString("cluster_id")
    var namespace = getQueryString("namespace")
    var selector = getQueryString("labelSelector")
    console.log(cluster_id, namespace, name, selector)

    // 检测本地是否保存变量
    if (cluster_id > 0) {
        console.log("save cluster_id to session_storage")
        sessionStorage.setItem("cluster_id", cluster_id)
    } else {
        cluster_id = sessionStorage.getItem("cluster_id")
        // 设置cluster_id默认值
        if (cluster_id == null) {
            cluster_id = 1
            sessionStorage.setItem("cluster_id", cluster_id)
        }
    }
    if (namespace) {
        sessionStorage.setItem("namespace", namespace)
    } else {
        namespace = sessionStorage.getItem("namespace")
        // 设置默认值
        if (namespace == null) {
            namespace = '_all'
            sessionStorage.setItem("namespace", namespace)
        }
    }

    // 页面载入完毕后执行接口调用
    $(document).ready(function () {
        // $('#loading').hide()
        // 获取所有集群列表，并填入下拉菜单
        $.get('/api/cluster_list', function (data) {
            var clusters = data
            console.log(data)
            for (let i in clusters) {
                $('#selectCluster').append('<option value="' + clusters[i].id + '">' + clusters[i].name + '</option>')
            }
            // 如果url带cluster_id，则刷新namespace下拉菜单
            if (cluster_id > 0) {
                console.log("URL have cluster_id")
                $('#selectCluster').val(cluster_id)
                refreshNamespace(cluster_id)

                // 如果url带namespace，则刷新资源下拉菜单，刷新数据表格
                if (namespace) {
                    console.log("URL have namespace")
                    $('#selectNamespace').val(namespace)
                    refreshTable(cluster_id, namespace, type)
                }
            }
        })
    })

    function refreshTable(cluster_id, namespace, type) {
        $('#loading').show()
        // 数据有效性校验
        if (cluster_id === '' || namespace === '' || type === '') {
            bootbox.alert("有未填写的参数，请返回检查")
            return false
        }
        //接口调用，并填充数据Table
        let url = '/api/cluster/' + cluster_id + '/' + namespace + '/' + type + '/'
        if (selector) {
            url += "?selector=" + selector
        }
        $.get(url, function (result) {
            console.log(result)
            $('#tbody').find('td').remove()
            // 如果指定了资源名，则根据name查询，返回单个资源； 否则返回该资源类型所有数据

            // 不指定资源名查询，返回list
            for (let i in result.items) {
                let name = result.items[i].metadata.name
                let res_ns = result.items[i].metadata.namespace
                let url_yml = '/cluster/' + cluster_id + '/' + res_ns + '/' + type + '/' + name + '/yaml'
                var text = '<tr>'
                text += '<td>' + name + '</td>'
                text += '<td>' + res_ns + '</td>'
                text += '<td>' + result.items[i].spec.type + '</td>'
                text += '<td>' + result.items[i].spec.clusterIP + '</td>'
                // text += '<td>' + JSON.stringify(result.items[i].spec.ports) + '</td>'
                let cell = ''
                for (let j in result.items[i].spec.ports) {
                    console.log(j)
                    cell = cell + JSON.stringify(result.items[i].spec.ports[j]) + '<br>'
                }
                text += '<td>' + cell + '</td>'

                text += '<td>' + result.items[i].metadata.creationTimestamp + '</td>'
                text += '<td><a href="' + url_yml + '">编辑</a></td>'
                text += '</tr>'
                $('#tbody').append(text)
            }


            $('#example1').DataTable({
                language: {
                    "url": "/static/language.json"
                },
                processing: true,
                paging: true,
                lengthChange: true,
                searching: true,
                ordering: true,
                order: [[1, 'asc'], [0, 'asc']],
                autoWidth: true,
                responsive: true,
            });
            $('#loading').hide()
        });
    }

    function refreshNamespace(cluster_id) {
        console.log("refresh namespace");

        // var current_cluster_id = $('#selectCluster').val().trim()
        $("#selectNamespace").find('option').remove();
        $("#selectNamespace").append('<option value="_all">所有</option>');
        $.get('/api/v1/cluster/' + cluster_id + '/namespaces', function (data) {
            for (var i in data.items) {
                $("#selectNamespace").append('<option value="' + data.items[i].metadata.name + '">' + data.items[i].metadata.name + '</option>');
            }
            if (namespace) {
                $('#selectNamespace').val(namespace)
            }

        });
    }



    // 检测集群、命名空间，任一选择变化，则重载页面
    $(".need-refresh-table").change(function () {
        console.log("need-refresh-table")
        let cluster_id = $('#selectCluster').val()
        // var namespace = $("#selectNamespace").find("option:selected").text().trim()
        let namespace = $("#selectNamespace").val()

        console.log(cluster_id, namespace)

        if (cluster_id > 0) {
            let url = '/cluster/' + type + '/?cluster_id=' + cluster_id
            if (namespace) {
                url += '&namespace=' + namespace
            } else {
                url += '&namespace=_all'
                $('#selectNamespace').val(namespace)
            }
            location.href = url
        }
    })


</script>

{% endblock %}